<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header"></head>
<style>
	.province {
		float: left;
		position: relative;
		width: 150px;
		height: 35px;
		line-height: 35px;
		border: 1px solid #fff;
	}

	.province:hover {
		border: 1px solid #f7e4a5;
		border-bottom: 1px solid #fffec6;
		background: #fffec6;
	}

	.province .cityall {
		margin-top: 10px;
	}

	.province ul {
		list-style: outside none none;
		position: absolute;
		padding: 0;
		background: #fffec6;
		border: 1px solid #f7e4a5;
		display: none;
		width: auto;
		width: 300px;
		z-index: 999999;
		left: -26px;
		top: 33px;
	}

	.province ul li {
		float: left;
		min-width: 60px;
		margin-left: 20px;
		height: 30px;
		line-height: 30px;
	}

	.province .checkbox-inline {
		padding-top: 0;
	}

	h3, h4, h5 {
		margin: 5px 0;
		font-weight: 600;
	}

	input[type=email], input[type=url], input[type=search], input[type=tel],
	input[type=color], input[type=text], input[type=password], input[type=datetime],
	input[type=datetime-local], input[type=date], input[type=month], input[type=time],
	input[type=week], input[type=number], textarea {
		border-radius: 0 !important;
		color: #858585;
		background-color: #FFF;
		border: 1px solid #D5D5D5;
		padding: 5px 4px 6px;
		font-size: 14px;
		font-family: inherit;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		-webkit-transition-duration: .1s;
		transition-duration: .1s;
	}
	.spectable td, .spectable th {
		border: 1px solid #ccc;
		vertical-align: middle;
		text-align: center;
	}

	.spectable th {
		font-weight: bold;
	}

	.spectableinput {
		text-align: center;
	}

	.f {
		border-color: #b94a48;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	}

	.table.table-bordered tr th, .table.table-bordered tr td {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	select {
		padding: 3px 4px;
		height: 30px;
	}

	/* .tags {
        display: inline-block;
        padding: 4px 6px;
        color: #777;
        vertical-align: middle;
        background-color: #FFF;
        border: 1px solid #D5D5D5;
        width: 206px;
    } */
</style>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<input type="hidden" th:value="${centre.centreId}" id="centreId" name="centreId">
							<table class="table table-bordered table-condensed">
								<tbody>
								<tr>
									<th class="required" style="text-align: right;"><em class="gg-star">*</em>商户名称:</th>
									<td><input id="name" name="name" class="form-control" type="text" th:value="${centre.name}"/></td>

									<th class="required" style="text-align: right;"><em class="gg-star">*</em>简称:</th>
									<td><input id="shortName" name="shortName" class="form-control" type="text" th:value="${centre.shortName}"/></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;"><em class="gg-star">*</em>商户类型:</th>
									<td>
										<select id="type" name="type" class="form-control" th:filed="*{centre.type}">
											<option value="1">企业</option>
											<option value="0">个人</option>
										</select>
									</td>
									<th class="required" style="text-align: right;">官网:</th>
									<td><input id="network" name="network" class="form-control" type="text" th:value="${centre.network}"></td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;"><em class="gg-star">*</em>一级分类:</th>
									<td>
										<select class="form-control" id="pcate" name="pcate" onchange="renderCategoryThird(this)">
											<option value="0">请选择顶级分类</option>
											<option th:selected="${centre.pcate eq item.id}"
													th:each="item: ${category}"
													th:text="${item.name}"
													th:value="${item.id}">
											</option>
										</select>
									</td>
									<th class="required" style="text-align: right;"><em class="gg-star">*</em>二级分类:</th>
									<td>
										<select class="form-control" id="ccate" name="ccate">
											<option value="0">请选择下级分类</option>
											<option th:selected="${centre.ccate eq item.id}"
													th:each="item: ${centre.ccategoryList}"
													th:text="${item.name}"
													th:value="${item.id}">
											</option>
										</select>
									</td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">地区</th>
									<td colspan="3">
										<div class="gg-formDetail gg-font0" data-toggle="distpicker" th:attr="data-province=${centre.province},data-city=${centre.city},data-district=${centre.area}">
											<div class="gg-area">
												<select class="form-control" id="province" name="province"
														:data-province="----选择省----">
												</select>
											</div>
											<div class="gg-area">
												<select class="form-control" id="city" name="city" :data-city="----选择市----">
												</select>
											</div>
											<div class="gg-area">
												<select class="form-control" id="area" name="area"
														:data-district="----选择区----">
												</select>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">详细地址:</th>
									<td colspan="3"><input id="address" name="address" class="form-control" type="text" th:value="${centre.address}"/>
									</td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;">注册地址:</th>
									<td colspan="3"><input id="registAddress" name="registAddress" class="form-control" type="text" th:value="${centre.registAddress}"/></td>
								</tr>
<!--								<tr>-->
<!--									<th class="required" style="text-align: right;">费率比例:</th>-->
<!--									<td colspan="3"><input id="deductionRatio" name="deductionRatio" class="form-control" type="number" th:value="${centre.deductionRatio}"/></td>-->
<!--								</tr>-->
								<tr th:if="${centreName} == 'admin'">
									<th class="required" style="text-align: right;">线上扣点比例(百分比):</th>
									<td><input id="deductionRatio" name="deductionRatio" th:value="${centre.deductionRatio}" class="form-control" type="number"/></td>

									<th class="required" style="text-align: right;">线下扣点比例(百分比):</th>
									<td><input id="offlineDeductionRatio" name="offlineDeductionRatio" th:value="${centre.offlineDeductionRatio}" class="form-control" type="number"/></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">开户行:</th>
									<td ><input id="depositBank" name="depositBank" class="form-control" type="text" th:value="${centre.depositBank}"/></td>

									<th class="required" style="text-align: right;">开户行账号:</th>
									<td><input id="bankNo" name="bankNo" class="form-control" type="text" th:value="${centre.bankNo}"></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">营业执照编号:</th>
									<td><input id="busiLicense" name="busiLicense" class="form-control" type="text" placeholder="类型为企业时必填" th:value="${centre.busiLicense}"/></td>
									
									<th class="required" style="text-align: right;">经营类别:</th>
									<td><input id="busiCategory" name="busiCategory" class="form-control" type="text" placeholder="类型为企业时必填" th:value="${centre.busiCategory}"/></td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;">注册资金(万):</th>
									<td><input id="registCapital" name="registCapital" min="0" class="form-control" placeholder="类型为企业时必填" th:value="${centre.registCapital}"/></td>
									<th class="required" style="text-align: right;">注册日期:</th>
									<td><input type="text" class="laydate-icon form-control" placeholder="请选择日期,类型为企业时必填"
											   id="registDate" name="registDate"
											   onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
											   style="background-color: #fff;" readonly="readonly"  th:value="${centre.registDate} == null?null:${#dates.format(centre.registDate,'yyyy-MM-dd')}"/></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">法人姓名:</th>
									<td><input id="legalName" name="legalName" class="form-control" type="text" th:value="${centre.legalName}"/></td>

									<th class="required" style="text-align: right;">法人身份证:</th>
									<td><input id="legalNo" name="legalNo" class="form-control" type="text" th:value="${centre.legalNo}"/></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;"><!-- 控制人 -->ip:</th>
									<td><input id="controller" name="controller" class="form-control" type="text" th:value="${centre.controller}"/></td>

									<th class="required" style="text-align: right;"><!-- 控制人身份证 -->enterpriceUrl:</th>
									<td><input id="controllerNo" name="controllerNo" class="form-control" type="text" th:value="${centre.controllerNo}"/></td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;"><!-- 账户管理人 -->小程序Appid:</th>
									<td><input id="gzhAppid" name="gzhAppid" class="form-control" type="text" th:value="${centre.relateAccount}"/></td>

									<th class="required" style="text-align: right;"><!-- 账户管理办公电话 -->小程序Secret:</th>
									<td><input id="gzhSecret" name="gzhSecret" class="form-control" type="text" th:value="${centre.accountTel}"/></td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;"><em class="gg-star">*</em>账户管理手机:</th>
									<td><input id="accountMobile" name="accountMobile" class="form-control" type="text" th:value="${centre.accountMobile}"/></td>

									<th class="required" style="text-align: right;"><!-- 账户管理邮箱 -->components:</th>
									<td><input id="accountEmail" name="accountEmail" class="form-control" type="text" th:value="${centre.accountEmail}"/></td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;"><!-- 业务联系人 -->微信支付商户号(mchId):</th>
									<td><input id="relateBusi" name="relateBusi" class="form-control" type="text" th:value="${centre.relateBusi}"/></td>

									<th class="required" style="text-align: right;"><!-- 业务联系办公电话 -->certificateKey:</th>
									<td><input id="busiTel" name="busiTel" class="form-control" type="text" th:value="${centre.busiTel}"/></td>
								</tr>

								<tr>
									<th class="required" style="text-align: right;"><!-- 业务联系手机 -->certificateFile:</th>
									<td><input id="busiMobile" name="busiMobile" class="form-control" type="text" th:value="${centre.busiMobile}"/></td>

									<th class="required" style="text-align: right;"><!-- 业务联系邮箱 -->paySignKey:</th>
									<td><input id="busiEmail" name="busiEmail" class="form-control" type="text" th:value="${centre.busiEmail}"/></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">打款期限（天）:</th>
									<td><input id="paymentdays" name="paymentdays" class="form-control" type="text" th:value="${centre.paymentdays}"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">备注:</th>
									<td colspan="3">
										<textarea id="desc" name="desc" class="form-control" th:text="${centre.desc}"></textarea>
									</td>
								</tr>
								<tr>
									<th style="text-align: right;">商品审核:</th>
									<td colspan="3">
										<div class="col-sm-8">
											<label class="radio-inline">
												<input type="radio" name="verify" value="1" th:field="*{centre.verify}"/>审核
											</label>
											<label class="radio-inline">
												<input type="radio" name="verify" value="0" th:field="*{centre.verify}"/>不审核
											</label>
										</div>
									</td>
								</tr>
								<tr>
									<th style="text-align: right;">售卖区域:</th>
									<td colspan="3">
										<div class="col-sm-9 col-xs-12">
											<div id="areas" class="form-control-static" th:text="${centre.saleAreas}">长沙市;株洲市;湘潭市;</div>
											<a href="javascript:;" class="btn btn-default"
											   onclick="selectAreas()">选择地区</a>
											<input type="hidden" id="selectedareas" name="areas" value="长沙市;株洲市;湘潭市;" />
										</div>

										<div id="modal-areas" class="modal fade" tabindex="-1">
											<div class="modal-dialog" style='width: 920px;'>
												<div class="modal-content">
													<div class="modal-header">
														<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
														<h3>选择区域</h3>
													</div>
													<div class="modal-body" id="areas-modal-body" style='height: 280px;'>
														<div class='province'>
															<label class='checkbox-inline' style='margin-left: 20px;'>
																<input type='checkbox' class='cityall' style='margin-top: 12px;' />
																<span class="citycount" style='color: #ff6600'></span>
															</label>
														</div>
													</div>
													<div class="modal-footer">
														<a id='btnSubmitArea' class="btn btn-success" data-dismiss="modal"
														   aria-hidden="true">确定</a>
														<a class="btn btn-default" data-dismiss="modal"
														   aria-hidden="true">关闭</a>
													</div>
												</div>
											</div>
										</div>
									</td>
								</tr>

								<tr>
									<th style="text-align: right;">营业执照:</th>
									<td><input id="busiLicenseImg" name="busiLicenseImg" class="form-control" type="text" th:value="${centre.busiLicenseImg}">
									</td>
									<th><button type="button"  onclick="onSelectImgBtnClick('busiLicenseImg','busiLicenseImgPre')"
												class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
									<td><img th:src="${centre.busiLicenseImg}" id="busiLicenseImgPre" style="max-width: 30%"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">手持身份证照片:</th>
									<td><input id="handIdPhoto" name="handIdPhoto" class="form-control" type="text" th:value="${centre.handIdPhoto}">
									</td>
									<th><button type="button"  onclick="onSelectImgBtnClick('handIdPhoto','handIdPhotoPre')"
												class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
									<td><img th:src="${centre.handIdPhoto}" id="handIdPhotoPre" style="max-width: 30%"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">其他证件:</th>
									<td><input id="otherLicenseImg" name="otherLicenseImg" class="form-control" type="text" th:value="${centre.otherLicenseImg}">
									</td>
									<th><button type="button"  onclick="onSelectImgBtnClick('otherLicenseImg','otherLicenseImgPre')"
												class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
									<td><img th:src="${centre.otherLicenseImg}" id="otherLicenseImgPre" style="max-width: 30%"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">店招图片:</th>
									<td><input id="signageImg" name="signageImg" class="form-control" type="text" th:value="${centre.signageImg}">
									</td>
									<th><button type="button"  onclick="onSelectImgBtnClick('signageImg','signageImgPre')"
												class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
									<td><img th:src="${centre.signageImg}" id="signageImgPre" style="max-width: 30%"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">LOGO:</th>
									<td><input id="logo" name="logo" class="form-control" type="text" th:value="${centre.logo}">
									</td>
									<th><button type="button"  onclick="onSelectImgBtnClick('logo','logoPre')"
												class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
									<td><img th:src="${centre.logo}" id="logoPre" style="max-width: 30%"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">二维码:</th>
									<td><input id="qrCode" name="qrCode" class="form-control" type="text" th:value="${centre.qrCode}">
									</td>
									<th><button type="button"  onclick="onSelectImgBtnClick('qrCode','qrCodePre')"
												class="btn btn-primary"><i class="fa fa-check"></i>选择图片</button></th>
									<td><img th:src="${centre.qrCode}" id="qrCodePre" style="max-width: 30%"/></td>
								</tr>
								<tr>
									<th class="required" style="text-align: right;">上班时间(09:00):</th>
									<td><input id="workStart" name="workStart" class="form-control" type="text" th:value="${centre.workStart}"/></td>

									<th class="required" style="text-align: right;">下班时间(22:00):</th>
									<td><input id="workEnd" name="workEnd" class="form-control" type="text" th:value="${centre.workEnd}"/></td>
								</tr>
								<tr>
									<th style="text-align: right;">虚拟商家:</th>
									<td colspan="3">
										<div class="col-sm-8">
											<label class="radio-inline">
												<input type="radio" name="isVirtual" value="1" th:field="*{centre.isVirtual}"/>是
											</label>
											<label class="radio-inline">
												<input type="radio" name="isVirtual" value="0" th:field="*{centre.isVirtual}"/>否
											</label>
										</div>
									</td>
								</tr>
								<tr th:if="${centreName} == 'admin'">
									<th class="required" style="text-align: right;">线上扣点比例(百分比):</th>
									<td><input id="yplServiceRate" name="yplServiceRate" class="form-control" type="number" th:value="${centre.yplServiceRate}"/></td>

									<th class="required" style="text-align: right;"></th>
									<td></td>
								</tr>

								</tbody>
							</table>
							<div class="form-group text-center">
								<div class="col-sm-8 col-sm-offset-2">
									<button type="submit"  class="btn btn-primary"><i class="fa fa-check"></i>提交</button>
									<div class="btn btn-danger" onclick="closeDow()"><i class="fa fa-remove"></i> 关闭</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div th:include="centre/manage/include::footer"></div>
	<script type="text/javascript" src="/js/appjs/product/AreaData.js"></script>
	<script type="text/javascript" src="/js/appjs/centre/manage/edit.js"></script>
	<script type="text/javascript">
		function closeDow() {
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
		}
        $(function() {
            //从js数据中获取地区
            var areasModalBody = '';
            for (var i = 0; i < provs_data.length; i++) {
                console.log(provs_data[i]);
                areasModalBody += "<div class='province'>";
                areasModalBody += "<label class='checkbox-inline' style='margin-left:20px;'>";
                areasModalBody += "<input type='checkbox' class='cityall' style='margin-top:12px;' />";
                areasModalBody += provs_data[i].text;
                areasModalBody += "<span class='citycount' style='color:#ff6600'></span>";
                areasModalBody += "</label>";

                //获取省级下的所有市
                if (citys_data[provs_data[i].value].length > 0) {
                    areasModalBody += "<ul>";
                    var citys = citys_data[provs_data[i].value];
                    for (var j = 0; j < citys.length; j++) {
                        //	alert(JSON.stringify(dists_data[citys[j].value]));

                        areasModalBody += "<li>";
                        areasModalBody += "<label class='checkbox-inline' >";
                        areasModalBody += "<input type='checkbox' class='city' style='margin-top:8px;' city="+citys[j].text+" />";
                        areasModalBody += citys[j].text;
                        areasModalBody += "</label>";
                        areasModalBody += "</li>";
                    }
                    areasModalBody += "</ul>";
                }

                areasModalBody += "</div>";
            }
            $("#areas-modal-body").html(areasModalBody);

            $('.province').mouseover(function() {
                $(this).find('ul').show();
            }).mouseout(function() {
                $(this).find('ul').hide();
            });


            $('.cityall').click(function(){
                var checked = $(this).get(0).checked;
                var citys = $(this).parent().parent().find('.city');
                citys.each(function(){
                    $(this).get(0).checked = checked;
                });
                var count = 0;
                if(checked){
                    count =  $(this).parent().parent().find('.city:checked').length;
                }
                if(count>0){
                    $(this).next().html("(" + count + ")")    ;
                }
                else{
                    $(this).next().html("");
                }
            });
            $('.city').click(function(){
                var checked = $(this).get(0).checked;
                var cityall = $(this).parent().parent().parent().parent().find('.cityall');

                if(checked){
                    cityall.get(0).checked = true;
                }
                var count = cityall.parent().parent().find('.city:checked').length;
                if(count>0){
                    cityall.next().html("(" + count + ")")    ;
                }
                else{
                    cityall.next().html("");
                }
            });

            $('#btnSubmitArea').unbind('click').click(function(){
                $('.city:checked').each(function(){
                    citystrs+= $(this).attr('city') +";";
                });
                $('.' + current + ' .cityshtml').html(citystrs);
                $('.' + current + ' .citys').val(citystrs);
            })


        });
        function clearSelects(){
            $('.city').attr('checked',false).removeAttr('disabled');
            $('.cityall').attr('checked',false).removeAttr('disabled');
            $('.citycount').html('');
        }

        function selectAreas(){
            clearSelects();
            var old_citys = $('#areas').html().split(';');
            $('.city').each(function(){
                var parentcheck = false;
                for(var i in old_citys){
                    if(old_citys[i]==$(this).attr('city')){
                        parentcheck = true;
                        $(this).get(0).checked = true;
                        break;
                    }
                }
                if(parentcheck){
                    $(this).parent().parent().parent().parent().find('.cityall').get(0).checked=true;
                }
            });

            $("#modal-areas").modal();
            var citystrs = '';
            $('#btnSubmitArea').unbind('click').click(function(){
                $('.city:checked').each(function(){
                    citystrs+= $(this).attr('city') +";";
                });
                $('#areas').html(citystrs);
                $("#selectedareas").val(citystrs);
            })
        }

        function renderCategoryThird(obj) {
            var index = obj.options[obj.selectedIndex].value;
            var html = "<option value='0'>请选择下级分类</option>";
            if (index == 0) {
                $("#ccate").html(html);
            }else {
                $.ajax({
                    url: "/centre/category/getChildByPar",
                    data:{"id":index},
                    dataType: "json",
                    success: function(data){
                        for(var i=0; i< data.length; i++){
                            html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                        }
                        $("#ccate").html(html);
                    }
                })
            }
        }

        function onSelectImgBtnClick(inputId, imgId) {
            layer.open({
                id:'selectImg',
                type : 2,
                title : '选择图片',
                maxmin : true,
                shadeClose : false,
                area : [ '60%', '70%' ],
                content : '/platform/config/selectImg/' + inputId +"/"+ imgId // iframe的url
            });
        }

        /**
         * 加载图片URL
         * @param inputId
         * @param imgId
         * @param url
         */
        function loadImgUrl(inputId, imgId, url) {
            $('#'+inputId +'').val(url);
            $('#'+imgId +'').attr('src', url);
        }

        /**
         * 关联会员
         */
        function relateMember() {
            var centreId = $("*[name='centreId']").val();
            layer.open({
                id : "relation_member",
                type : 2,
                title : "关联会员",
                maxmin : true,
                shadeClose : true,
                area : [ '70%', '80%' ],
                content : "/mall/supply/relateMemberByCentreId?centreId=" + centreId
                // content: "/mall/supply/relateMember?centreId=" + centreId
            })
        }
	</script>
</body>
</html>
